<template>
<view :style="theme" class="page">
	<u-loading-icon class="d-kuan d-shang-10" text="加载中..." textSize="18" height="80"  :show="jiazai"></u-loading-icon>
	<!--圈子-->
	<block v-if="quanzijiazai">
		<u-navbar :bgColor="bgColor" :placeholder="true">
			<view
				class="d-kuan"
				slot="left"
			>   
			    <view class="d-zuo d-buhuanhang d-kuan">
					<u-icon
						name="arrow-left"
						size="22"
						@click="fanhui()"
					></u-icon>
					
				</view>
				
			</view>
			<view
				class="d-kuan"
				slot="right"
			>
				<view class="d-you" >
					
				</view>
			</view>
			
		</u-navbar>

		<view class="d-kuan" :style="quan.beijingtu ? beijingtuImage : beijingtuColor">
			
			<view class="d-neikuang-10">
				<view class="d-kuan d-yuanjiao-10">
					<view class=" d-yuanjiao-10 d-xia-10">
						<view class="d-kuan d-gao-80"></view>
						<view class="d-buhuanhang">
							<view class="d-kuan-50">
								<image :src="quan.thumb" class="d-img-50 d-yuanjiao-50" ></image>
							</view>
							<view class="d-kuan d-zuo-10">
								<view class="d-jiacu d-wenzi-yanse-bai">{{quan.title}}</view>
								<view class="d-wenzi-12 d-wenzi-yanse-bai d-shang-10">
									<text class="">帖子：{{quan.son_total}}</text>
									<text class="d-zuo-10 ">会员：{{quan.joins}}</text>
								</view>
								<view class="d-wenzi-12 d-wenzi-yanse-bai">圈主：{{quan.quanzhu}}</view>
							</view>
							<view class="d-kuan-70">
								<view v-if="uid == quan.uid">
									<view class="d-shang-10 d-neirong-juzhong d-hanggao-25 d-wenzi-yanse-bai d-wenzi-14 d-beijing-hei d-yuanjiao-50 d-kuan-50 d-gao-26">
										圈主
									</view>
								</view>
								<view v-else >
									<view v-if="jiaru == 1" @click="postJiaruquanzidata()" class="d-shang-10 d-neirong-juzhong d-hanggao-25 d-wenzi-yanse-hui d-wenzi-14 d-beijing-hui-f6 d-yuanjiao-50 d-kuan-50 d-gao-26">
										已加
									</view>
									<view v-else-if="jiaru == 2" @click="fufeijiaru()" class="d-shang-10 d-neirong-juzhong d-hanggao-25 d-wenzi-yanse-bai d-wenzi-14 d-beijing-hei d-yuanjiao-50 d-kuan-50 d-gao-26">
										加入
									</view>
									<view v-else-if="jiaru == 3" @click="fufeijiaru()" class="d-shang-10 d-neirong-juzhong d-hanggao-25 d-wenzi-yanse-bai d-wenzi-14 d-beijing-hei d-yuanjiao-50 d-kuan-50 d-gao-26">
										待加
									</view>
									<view v-else-if="jiaru == 4" @click="fufeijiaru()" class="d-shang-10 d-neirong-juzhong d-hanggao-25 d-wenzi-yanse-bai d-wenzi-14 d-beijing-hei d-yuanjiao-50 d-kuan-50 d-gao-26">
										续费
									</view>
									<view v-else @click="postJiaruquanzidata()" class="d-shang-10 d-neirong-juzhong d-hanggao-25 d-wenzi-yanse-bai d-wenzi-14 d-beijing-hei d-yuanjiao-50 d-kuan-50 d-gao-26">
										加入
									</view>
								</view>
								
							</view>
						</view>
						<view class="d-kuan d-buhuanhang d-shang-10">
							<block v-for="(item, index) in quan.quanuser" :key="index">
								<view class="d-touxiang-10">
									<u-avatar :src="item.touxiang" fontSize="22" size="20" ></u-avatar>
								</view>
							</block>
						</view>
						<view class="d-kuan d-shang-10 d-ziti-12 d-wenzi-yanse-bai">
							
							<u--text :text="'圈子介绍：'+quan.description" :lines="3" color="#ffffff">
								
							</u--text>
						</view>
						
					</view>
					<view class="d-clear"></view>
				</view>
			</view>
		</view>
		<u-sticky offset-top="0" :bgColor="fenggeyanse=='light' ? '#ffffff' : '#0b0b0b'">
			<!--导航-->
			<u-tabs-d 
				:list="daohang"
				@click="click" 
				:lineColor="fenggeyanse=='light' ? quan && quan.beijingyanse : '#666666'"
				:activeStyle="{
					color: fenggeyanse=='light' ? '#0b0b0b' : '#666666',
					fontWeight: 'bold',
					transform: 'scale(1.05)'
				}"
			></u-tabs-d>
			<!--二级导航-->
			<u-tabs-d
				v-if="daohangerjixs && qid != 0"
				:list="daohangerji" 
				@click="clickErji" 
				:lineColor="fenggeyanse=='light' ? quan && quan.beijingyanse : '#666666'"
				:activeStyle="{
					color: fenggeyanse=='light' ? '#0b0b0b' : '#666666',
					fontWeight: 'bold',
					transform: 'scale(1.05)'
				}"
			></u-tabs-d>
		</u-sticky>
		<!--置顶-->
		<view v-if="zhiding.length >= 1 && daohangid == 0" class="d-waikuang-10">
			<view class="d-kuan d-beijing-bai d-yuanjiao-10 ">
				<view class="d-neikuang-zuoyou-6-shangxia-10">
				<block v-for="(item, index) in zhiding" :key="index">
					<view class="d-kuan d-buhuanhang">
						<view class="d-neikuang-zuoyou-2-shangxia-4" @click="tiezi(item.cid,item.id)">
							<view class="d-kuan-40 d-zuo">
								<u-tag :bgColor="fenggeyanse=='light' ? quan && quan.beijingyanse : '#303030'" :borderColor="fenggeyanse=='light' ? quan && quan.beijingyanse : '#303030'" text="置顶" size="mini" type="primary"></u-tag>
							</view>
							<view class="d-zuo d-zuo-10">
								<u--text :text="item.title" :lines="1" :color="fenggeyanse=='light' ? '#000000' : '#868686'"></u--text>
							</view>
						</view>
					</view>
					<view class="d-clear"></view>
				</block>
				</view>
			</view>
		</view>
		<!--帖子-->
		<!-- 列表template模板 -->
		<view class="d-yuanjiao-10">
			<view class="d-neikuang-zuoyou-6-shangxia-10">
				<u-row >
					<u-col span="4">
						<view  class="d-kuan d-buhuanhang">
						<u-icon class="d-shang-3" name="file-text" size="20"></u-icon> <view class="d-wenzi-hei"> 最新帖子</view>
						</view>
					</u-col>
					<u-col span="4">
						<view class="demo-layout bg-purple-light"></view>
					</u-col>
					<u-col span="4">
						<view v-if="fenggekaiguan == 0"  class="d-kuan">
						<view  class="d-kuan-40 d-you">
							<u-icon class="d-shang-3 d-you" name="list-dot" @click="fenggeshow = true" size="25"></u-icon>
							
						</view>
						</view>
					</u-col>
				</u-row>
			</view>
		</view>
		<u-picker
			:show="fenggeshow" 
			:columns="fenggevalue"
			:closeOnClickOverlay="true"
			title="选择风格"
			@cancel="fenggeshow = false"
			@confirm="fenggeshow = false"
			@change="fenggevalues"
		></u-picker>
		<view v-if="fengge == 2" >
			<Dwaterfall
			:dataList="postsList" 
			:column="columns" 
			@click="click" 
			@tiezi="tiezi"
			@getgeren="getgeren"
			@dianzan="dianzan"
			></Dwaterfall>
			<u-loading-icon text="加载中..." textSize="18" :show="xialajiazai" ></u-loading-icon>
			<view :style="'display:' + (isLoading?'block':'none')">
				<template is="tempLoading"></template>
			</view>
			<view class="loadingmore" :style="'display:' + floatDisplay">
				<view class="no-more" :hidden="!isLastPage">- 无更多文章 -</view>
			</view>
			<u-divider text="已经到底啦 !" v-if="daodi">{{daodi}}</u-divider>
			<!-- 版权信息template模板 -->
			<view class="copyright" :style="'display:' + floatDisplay">
				<block data-type="template" data-is="tempCopyright" data-attr="webSiteName:webSiteName,domain:domain">
					<view> {{webSiteName}} </view>
					<view> {{banbenhao}} </view>
				</block>
			</view>
		</view>
		<view v-else-if="fengge == 3" >
			<block v-for="(item, index) in postsList" :key="index">
				<view class="d-kuan d-xia-10 d-beijing-bai">
					<view class="d-waikuang-10">
						<view class="d-kuan d-yuanjiao-10 d-shangxia-neikuang-10">
							<view class="u-page ">
								<view class="u-demo-block ">
									<view class="u-demo-block__content">
										<view class="album">
											<view class="album__avatar d-yuanjiao-50">
												
												<view class="d-gaokuang-40 d-kuanggao-40 d-yuanjiao-40 d-box" @click="getgeren(item.uid)">
													<image v-if="item.touxiang" :src="item.touxiang" mode="aspectFill" class="d-img-40 d-yuanjiao-50 "></image>
													<image v-else src="/static/assets/images/avatar.png" mode="aspectFill" class="d-img-40 d-yuanjiao-50 "></image>
													<image v-if="item.rzs == 1" :src="v" mode="aspectFill" class="d-img-10 d-yuanjiao-50  d-box-xia"></image>
												</view>
											</view>
											<view class="album__content">
												
												<u--text
												  :text="item.mingcheng"
												  type=""
												  bold
												  size="16"
												></u--text>
												<view class="d-wenzi-14 d-wenzi-yanse-hui">{{item.yonghuzu}}. {{item.guishudi}}</view>
												<!--标题-->
												<view v-if="item.caiji && item.caiji.kaiguan ==1">
													<view
														v-if="item.title"
														class="d-jiacu d-shang-10 d-wenzi-16 d-xia-10 d-younei-10  d-wenzi-hei" 
														@click="tiezi(item.cid,item.id)"
													>{{item.title}}</view>
													<view class="d-kuan d-buhuanhang d-shang-10" @click="tiezi(item.cid,item.id)">
														<view class="d-img-caiji">
															<image :src="item.caiji && item.caiji.tu" mode="aspectFill" class="d-img-200 d-yuanjiao-6"></image>
														</view>
														<view class="d-zuo-10">
															{{item.caiji && item.caiji.jianjie}}
														</view>
													</view>
												</view>
												<view v-else>
													<view 
														v-if="item.title"
														class="d-jiacu d-shang-10 d-wenzi-16 d-xia-10 d-younei-10  d-wenzi-hei" 
														@click="tiezi(item.cid,item.id)"
													>{{item.title}}</view>
													<view 
														class=" d-wenzi-14 d-wenzi-huanhang"
														@click="tiezi(item.cid,item.id)"
													>
														{{item.neirong}}
													</view>
												</view>
												
												<!--视频-->
												<view v-if="item.shipin.kaiguan == 1" class="d-shang-10">
													<video 
													class="d-yuanjiao-10 d-kuan"
													:src="item.shipin.url"
													controls>
													</video>
												</view>
												<view <view v-if="item.caiji && item.caiji.kaiguan !=1">
													<u-album class="d-shang-10" singleSize="250" multipleSize="90" :previewFullImage="false" :urls="item.tuji"></u-album>
													<u-album class="d-shang-10" singleSize="250" multipleSize="90" :previewFullImage="false" :urls="item.jiugetu"></u-album>
												</view>
												<!--u-divider text=""></u-divider-->
												<!--音频-->
												<view v-if="item.mpsan.kaiguan == 1" class="d-shang-10">
													<block v-for="(itemmp, indexmp) in  item.mpsan.mp" :key="indexmp">
														<sy-audio 
														isCountDown 
														:ref="'audio'+item.id+indexmp"
														:src='itemmp.url' 
														:audioCover='mpsantu' 
														subheading='' 
														:audioTitle='itemmp.title'
														:fenggeyanse="fenggeyanse"
														@audioPlay="audioPlay('audio'+item.id+indexmp)"
														@audioPause="audioPause"
														>
														</sy-audio>
														
														<!--view class="" @click="mpsanbofang(itemmp.title,itemmp.url)"> {{itemmp.title}}</view-->
													</block>
												</view>
												<!--问答进度条-->
												<view v-if="item.wendakaiguan ==1" class="d-neikuang-10 d-shang-10  d-yuanjiao-10 " :style="[{'background-color': fenggeyanse =='light'? '#fff4f4':'#242424'}]" @click="tiezi(item.cid,item.id)">
													<u-divider-d
															text="问答求助"
															textColor="#cf1212"
															:lineColor="fenggeyanse =='light'? '#fff4f4':'#242424'"
															ico="chat"
															color="#cf1212"
													></u-divider-d>
												
													<u-steps :current="item.wenda" :beijing="fenggeyanse =='light'? '#fff4f4':'#242424'" :inactiveColor="fenggeyanse =='light'? '#ff9346':'#f5f5f5'" activeColor="#ff702e">
														<u-steps-item title="提问中" :desc="item.tiwentime"></u-steps-item>
														<u-steps-item title="已解答" :desc="item.yijietime"></u-steps-item>
													</u-steps>
													
												</view>
												<!--需求进度条-->
												<view v-if="item.xuqiukaiguan ==1" class="d-neikuang-10 d-shang-10  d-yuanjiao-10 " :style="[{'background-color': fenggeyanse =='light'? '#f5f9ff':'#242424'}]">
													<u-steps :current="item.xuqiu" :beijing="fenggeyanse =='light'? '#f5f9ff':'#242424'" :inactiveColor="fenggeyanse =='light'? '#adadad':'#f5f5f5'" :activeColor="fenggeyanse =='light'? '#39c9e5':'#39c9e5'">
														<u-steps-item title="提需求" :desc="item.tixuqiutime"></u-steps-item>
														<u-steps-item title="排期中" :desc="item.paixuqiutime"></u-steps-item>
														<u-steps-item title="在开发" :desc="item.kaifaxuqiutime"></u-steps-item>
														<u-steps-item title="已上线" :desc="item.wangchengxuqiutime"></u-steps-item>
													</u-steps>
												</view>
												<!--缺点修复进度-->
												<view v-if="item.bugkaiguan ==1" class="d-neikuang-10 d-shang-10  d-yuanjiao-10 " :style="[{'background-color': fenggeyanse =='light'? '#eefffa':'#242424'}]">
													<u-steps :current="item.bugs" :beijing="fenggeyanse =='light'? '#eefffa':'#242424'" activeColor="#5eb295" :inactiveColor="fenggeyanse =='light'? '#adadad':'#f5f5f5'">
														<u-steps-item title="发现BUG" :desc="item.tibugtime"></u-steps-item>
														<u-steps-item title="排期中" :desc="item.paixubugtime"></u-steps-item>
														<u-steps-item title="在开发" :desc="item.kaifabugtime"></u-steps-item>
														<u-steps-item title="已修复" :desc="item.wangchengbugtime"></u-steps-item>
													</u-steps>
												</view>
												<!--招聘-->
												<Dzhaopin
													v-if="item.zpkg ==1"
													:xinzis="item.xinzis"
													:zpyqs="item.zpyqs"
													:zhaopinbiao="item.zhaopinbiao"
													:zhaopintime="item.zhaopintime"
													:acid="item.cid"
													:aid="item.id"
													:diqua="item.diqua"
													:diqub="item.diqub"
													:diquc="item.diquc"
													:zprs="item.zprs"
													:fulilist="item.fulilist"
													:zhaopinhaoma="item.zhaopinhaoma"
													:liebiao="0"
													:keycode="keycode"
													:gongzuodizhi="item.gongzuodizhi"
													:fenggeyanse="fenggeyanse"
													@tiezi="tiezi"
												></Dzhaopin>
												<!--评论-->
												<view class="d-shang-10">
													<view class="d-wenzi-12 d-shang-10 d-kuan-baifen-50 d-zuo d-wenzi-yanse-hui">
														{{item.shijian}}
													</view>
													<view class="d-wenzi-12 d-kuan-baifen-50 d-zuo d-wenzi-yanse-hui">
														<view class="d-wenzi-12 d-kuan-baifen-50 d-zuo d-neirong-zuo d-buhuanhang d-shang-4" @click="tiezi(item.cid,item.id)">
															<!--image src="/static/images/img/xiaoxi3.png" class="d-img-25"></image-->
															<u-icon :label="item.comments" size="28" name="/static/images/img/xiaoxi3.png"></u-icon>
															
														</view>
														<view class="d-wenzi-12 d-kuan-baifen-50 d-zuo d-neirong-you" :id="'zan'+item.id">
															
															<image v-if="item.zanzhi == 1" src="/static/images/img/dianzan2.png" class="d-img-35" @click="dianzan(index,item.id)"></image>
															<image v-else src="/static/images/img/zan3.png" class="d-img-35" @click="dianzan(index,item.id)"></image>
															<!--u-icon size="35" name="/static/images/img/zan3.png"></u-icon-->
														</view>
													</view>
													<view class="d-clear"></view>
												</view>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</block>
			<u-loading-icon text="加载中..." textSize="18" :show="xialajiazai" ></u-loading-icon>
			<view :style="'display:' + (isLoading?'block':'none')">
				<template is="tempLoading"></template>
			</view>
			<view class="loadingmore" :style="'display:' + floatDisplay">
				<view class="no-more" :hidden="!isLastPage">- 无更多文章 -</view>
			</view>
			<u-divider text="已经到底啦 !" v-if="daodi">{{daodi}}</u-divider>
			<!-- 版权信息template模板 -->
			<view class="copyright" :style="'display:' + floatDisplay">
				<block data-type="template" data-is="tempCopyright" data-attr="webSiteName:webSiteName,domain:domain">
					<view> {{webSiteName}} </view>
					<view> {{banbenhao}} </view>
				</block>
			</view>
		</view>
		<view v-else-if="fengge == 4" >
			<!--极简-->
			<block data-type="template" data-is="tempCommonList" data-attr="postsList:postsList,listAdsuccess:listAdsuccess">
				<block v-for="(item, index) in postsList" :key="index">
					<view class="d-kuan">
						<view class="d-waikuang-10">
							<view class="d-kuan d-beijing-bai d-yuanjiao-10">
								
								<view class="d-zuoyou-neikuang-10 d-buhuanhang d-shangxia-neikuang-10">
									<view class="d-kuan ">
										<!--标题-->
										<view v-if="item.caiji && item.caiji.kaiguan ==1">
											<view
												v-if="item.title"
												class="d-jiacu d-shang-10 d-wenzi-16  d-xia-10 d-younei-10  d-wenzi-hei" 
												@click="tiezi(item.cid,item.id)"
											>{{item.title}}</view>
											<view class="d-kuan d-buhuanhang d-xia-10" @click="tiezi(item.cid,item.id)">
												<view class="d-img-caiji">
													<image :src="item.caiji && item.caiji.tu" mode="aspectFill" class="d-img-200 d-yuanjiao-6"></image>
												</view>
												<view class="d-zuo-10">
													{{item.caiji && item.caiji.jianjie}}
												</view>
											</view>
										</view>
										<view v-else>
											<view 
											v-if="item.title"
											:class="{'d-jiacu': true,  'd-wenzi-16': true,  'd-xia-10': true,  '': quanzishuxing['kongge'] == 1, 'd-younei-10': true,  'd-wenzi-hei': true,}" 
											@click="tiezi(item.cid,item.id)"
											>{{item.title}}
											</view>
											<view 
											:class="{
											  'd-wenzi-14': true,  
											  'd-wenzi-huanhang': true,  
											  'd-wenzi-yanse-hui': true, 
											   'd-chaochu-2':true, 
											  '': quanzishuxing['kongge'] == 1,
											}"
											@click="tiezi(item.cid,item.id)">
												{{item.neirong}}
											</view>
										</view>
										<view class="d-buhuanhang d-shang-10">
											<!--头像-->
											<view class="d-yuanjiao-40 d-box" @click="getgeren(item.uid)">
												<image v-if="item.touxiang" :src="item.touxiang" mode="aspectFill" class="d-img-20 d-yuanjiao-50 d-beijing-hui"></image>
												<image v-else src="/static/assets/images/avatar.png" mode="aspectFill" class="d-img-20 d-yuanjiao-50 d-beijing-hui"></image>
											    
											</view>
											<view class="d-kuan d-zuo-10" @click="getgeren(item.uid)">
												<view class="d-wenzi-14 d-wenzi-yanse-hui-ca">{{item.mingcheng}}</view>
											</view>
											<view class="d-kuan d-neirong-you d-wenzi-yanse-hui-ca" :id="'guanzhu'+item.uid">
												<txet>{{item.shijiandate}}</txet>
											</view>
										</view>
									</view>
									<view v-if="item.tuji">
										<view class="d-kuan-90 d-zuo-10" v-if="item.caiji && item.caiji.kaiguan !=1 ">
											<view >
												<!--帖子内容图片-->
												<view class="d-fu-kuan-10" @click="tiezi(item.cid,item.id)">
																		
													<view v-if="item.getu ==1">
														<block v-for="(itemtu, indextu) in item.tuji" :key="indextu">
															<view class="d-zuo d-liangbian-10" v-if="indextu == 0">
																<image :src="itemtu" mode="aspectFill" class="d-img-100-baihua d-yuanjiao-6 d-yinying-10 d-img-anhei"></image>
															</view>
														</block>
													</view>
													<view v-else>
														<block v-for="(itemtu, indextu) in item.tuji" :key="indextu">
															<view class="d-zuo d-liangbian-10" v-if="indextu == 0">
																<image :src="itemtu" mode="aspectFill" class="d-img-100-baihua d-yuanjiao-6 d-yinying-10 d-img-anhei"></image>
															</view>
														</block>
													</view>
													
													<view class="d-clear"></view>
												</view>
												<view class="d-clear"></view>
											</view>
										</view>
									</view>
									

								</view>
							</view>
							
						</view>
					</view>
				</block>
			</block>
			<u-loading-icon text="加载中..." textSize="18" :show="xialajiazai" ></u-loading-icon>
			<view :style="'display:' + (isLoading?'block':'none')">
				<template is="tempLoading"></template>
			</view>
			<view class="loadingmore" :style="'display:' + floatDisplay">
				<view class="no-more" :hidden="!isLastPage">- 无更多文章 -</view>
			</view>
			<u-divider text="已经到底啦 !" v-if="daodi">{{daodi}}</u-divider>
			<!-- 版权信息template模板 -->
			<view class="copyright" :style="'display:' + floatDisplay">
				<block data-type="template" data-is="tempCopyright" data-attr="webSiteName:webSiteName,domain:domain">
					<view> {{webSiteName}} </view>
					<view> {{banbenhao}} </view>
				</block>
			</view>
		</view>
		<view v-else class="d-kuan">
			<block data-type="template" data-is="tempCommonList" data-attr="postsList:postsList,listAdsuccess:listAdsuccess">
				<block v-for="(item, index) in postsList" :key="index">
					<view class="d-kuan">
						<view class="d-waikuang-10">
							<view class="d-kuan d-beijing-bai d-yuanjiao-10">
								<view class="d-neikuang-10 d-buhuanhang">
									<!--头像-->
									<view class="d-gaokuang-40 d-kuanggao-40 d-yuanjiao-40 d-box" @click="getgeren(item.uid)">
										<image v-if="item.touxiang" :src="item.touxiang" mode="aspectFill" class="d-img-40 d-yuanjiao-50 d-beijing-hui"></image>
										<image v-else src="/static/assets/images/avatar.png" mode="aspectFill" class="d-img-40 d-yuanjiao-50 d-beijing-hui"></image>
									    <image v-if="item.rzs == 1" :src="v" mode="aspectFill" class="d-img-10 d-yuanjiao-50 d-beijing-hui d-box-xia"></image>
									</view>
									<view class="d-kuan d-zuo-10" @click="getgeren(item.uid)">
										<view class="d-wenzi-14 d-jiacu d-wenzi-hei">{{item.mingcheng}}</view>
										<view class="d-wenzi-14 d-wenzi-yanse-hui">{{item.yonghuzu}}. {{item.guishudi}}</view>
									</view>
									<view class="d-kuan-80 d-neirong-you" :id="'guanzhu'+item.uid">
										<view v-if="item.guanzhuuid == 1" @click="getGuanzhus(index,item.uid)" class="d-kuan-40 d-beijing-hei d-wenzi-yanse-bai-0 d-neikuang-zuoyou-2-shangxia-4 d-wenzi-12 d-yuanjiao-50 d-neirong-juzhong" >已关注</view>
										<view v-else @click="getGuanzhus(index,item.uid)" class="d-kuan-40 d-beijing-hui-f6 d-wenzi-hei d-neikuang-zuoyou-2-shangxia-4 d-wenzi-12 d-yuanjiao-50 d-neirong-juzhong" >关 注</view>
									</view>
								</view>
								<view class="d-zuoyou-neikuang-10">
									<!--标题-->
									<view v-if="item.caiji && item.caiji.kaiguan ==1">
										<view
											v-if="item.title"
											class="d-jiacu d-shang-10 d-wenzi-16 d-xia-10 d-younei-10  d-wenzi-hei" 
											@click="tiezi(item.cid,item.id)"
										>{{item.title}}</view>
										<view class="d-kuan d-buhuanhang" @click="tiezi(item.cid,item.id)">
											<view class="d-img-caiji">
												<image :src="item.caiji && item.caiji.tu" mode="aspectFill" class="d-img-200 d-yuanjiao-6"></image>
											</view>
											<view class="d-zuo-10">
												{{item.caiji && item.caiji.jianjie}}
											</view>
										</view>
									</view>
									<view v-else>
										<view 
										v-if="item.title"
										:class="{'d-jiacu': true,  'd-wenzi-16': true,  'd-xia-10': true,  'd-zuonei-50': quanzishuxing['kongge'] == 1, 'd-younei-10': true,  'd-wenzi-hei': true,}" 
										@click="tiezi(item.cid,item.id)"
										>{{item.title}}
										</view>
										<view 
										:class="{
										  'd-wenzi-14': true,  
										  'd-wenzi-huanhang': true,  
										  'd-wenzi-yanse-hui': true,  
										  'd-qiankong-50': quanzishuxing['kongge'] == 1,
										}"
										@click="tiezi(item.cid,item.id)">
											{{item.neirong}}
										</view>
									</view>
									<!--视频-->
									<view v-if="item.shipin.kaiguan == 1" class="d-shang-10">
										<video 
										class="d-yuanjiao-10 d-kuan"
										:src="item.shipin.url"
										controls>
										</video>
									</view>
									<!--音频-->
									<view v-if="item.mpsan.kaiguan == 1" class="d-shang-10">
										<block v-for="(itemmp, indexmp) in  item.mpsan.mp" :key="indexmp">
											<sy-audio 
											isCountDown 
											:ref="'audio'+item.id+indexmp"
											:src='itemmp.url' 
											:audioCover='mpsantu' 
											subheading='' 
											:audioTitle='itemmp.title'
											:fenggeyanse="fenggeyanse"
											@audioPlay="audioPlay('audio'+item.id+indexmp)"
											@audioPause="audioPause"
											>
											</sy-audio>
											
											<!--view class="" @click="mpsanbofang(itemmp.title,itemmp.url)"> {{itemmp.title}}</view-->
										</block>
									</view>
									<view <view v-if="item.caiji && item.caiji.kaiguan !=1">
										<!--帖子内容图片-->
										<view class="d-fu-kuan-10" @click="tiezi(item.cid,item.id)">
							
											<view v-if="item.getu ==1">
												<block v-for="(itemtu, indextu) in item.tuji" :key="indextu">
													<view class="d-kuan-30 d-zuo d-liangbian-10" v-if="indextu < 3">
														<image :src="itemtu" mode="aspectFill" class="d-img-100-bai d-yuanjiao-6 d-yinying-10 d-img-anhei"></image>
													</view>
												</block>
											</view>
											<view v-else>
												<block v-for="(itemtu, indextu) in item.tuji" :key="indextu">
													<view class="d-kuan-30 d-zuo d-liangbian-10" v-if="indextu < 9">
														<image :src="itemtu" mode="aspectFill" class="d-img-100-bai d-yuanjiao-6 d-yinying-10 d-img-anhei"></image>
													</view>
												</block>
											</view>
											
											<view class="d-clear"></view>
										</view>
										<view class="d-clear"></view>
										<!--帖子九格图图片-->
										<view class="d-fu-kuan-10" @click="tiezi(item.cid,item.id)">
											<block v-for="(itemtu, indextu) in item.jiugetu" :key="indextu">
												<view class="d-kuan-30 d-zuo d-liangbian-10" v-if="indextu < 8">
													<image :src="itemtu" mode="aspectFill" class="d-img-100-bai d-yuanjiao-6 d-yinying-10"></image>
												</view>
												
											</block>
											
											<view class="d-clear"></view>
										</view>
									</view>
									<!--下载-->
									<Dxiazai
										v-if="item.xzzt ==1"
										:xzzt="item.xzzt"
										:xzxz="item.xzxz"
										:xiazaifujian ="item.xiazaifujian"
										:acid="item.cid"
										:aid="item.id"
										@tiezi="tiezi"
										:yunxiazai="item.yunxiazai"
										:fenggeyanse="fenggeyanse"
									></Dxiazai>
									<!--问答进度条-->
									<view v-if="item.wendakaiguan ==1" class="d-neikuang-10 d-shang-10  d-yuanjiao-10 " :style="[{'background-color': fenggeyanse =='light'? '#fff4f4':'#242424'}]" @click="tiezi(item.cid,item.id)">
										<u-divider-d
												text="问答求助"
												textColor="#cf1212"
												:lineColor="fenggeyanse =='light'? '#fff4f4':'#242424'"
												ico="chat"
												color="#cf1212"
										></u-divider-d>
									
										<u-steps :current="item.wenda" :beijing="fenggeyanse =='light'? '#fff4f4':'#242424'" :inactiveColor="fenggeyanse =='light'? '#ff9346':'#f5f5f5'" activeColor="#ff702e">
											<u-steps-item title="提问中" :desc="item.tiwentime"></u-steps-item>
											<u-steps-item title="已解答" :desc="item.yijietime"></u-steps-item>
										</u-steps>
										
									</view>
									<!--需求进度条-->
									<view v-if="item.xuqiukaiguan ==1" class="d-neikuang-10 d-shang-10  d-yuanjiao-10 " :style="[{'background-color': fenggeyanse =='light'? '#f5f9ff':'#242424'}]">
										<u-steps :current="item.xuqiu" :beijing="fenggeyanse =='light'? '#f5f9ff':'#242424'" :inactiveColor="fenggeyanse =='light'? '#adadad':'#f5f5f5'" :activeColor="fenggeyanse =='light'? '#39c9e5':'#39c9e5'">
											<u-steps-item title="提需求" :desc="item.tixuqiutime"></u-steps-item>
											<u-steps-item title="排期中" :desc="item.paixuqiutime"></u-steps-item>
											<u-steps-item title="在开发" :desc="item.kaifaxuqiutime"></u-steps-item>
											<u-steps-item title="已上线" :desc="item.wangchengxuqiutime"></u-steps-item>
										</u-steps>
									</view>
									<!--缺点修复进度-->
									<view v-if="item.bugkaiguan ==1" class="d-neikuang-10 d-shang-10  d-yuanjiao-10 " :style="[{'background-color': fenggeyanse =='light'? '#eefffa':'#242424'}]">
										<u-steps :current="item.bugs" :beijing="fenggeyanse =='light'? '#eefffa':'#242424'" activeColor="#5eb295" :inactiveColor="fenggeyanse =='light'? '#adadad':'#f5f5f5'">
											<u-steps-item title="发现BUG" :desc="item.tibugtime"></u-steps-item>
											<u-steps-item title="排期中" :desc="item.paixubugtime"></u-steps-item>
											<u-steps-item title="在开发" :desc="item.kaifabugtime"></u-steps-item>
											<u-steps-item title="已修复" :desc="item.wangchengbugtime"></u-steps-item>
										</u-steps>
									</view>
									<!--招聘-->
									<Dzhaopin
										v-if="item.zpkg ==1"
										:xinzis="item.xinzis"
										:zpyqs="item.zpyqs"
										:zhaopinbiao="item.zhaopinbiao"
										:zhaopintime="item.zhaopintime"
										:acid="item.cid"
										:aid="item.id"
										:diqua="item.diqua"
										:diqub="item.diqub"
										:diquc="item.diquc"
										:zprs="item.zprs"
										:fulilist="item.fulilist"
										:zhaopinhaoma="item.zhaopinhaoma"
										:liebiao="0"
										:keycode="keycode"
										:gongzuodizhi="item.gongzuodizhi"
										:fenggeyanse="fenggeyanse"
										@tiezi="tiezi"
									></Dzhaopin>
									
									<!--评论-->
									<view class="d-shangxia-neikuang-10">
										<view class="d-wenzi-12 d-kuan-baifen-50 d-zuo d-wenzi-yanse-hui">
											{{item.shijian}}
										</view>
										<view class="d-wenzi-12 d-kuan-baifen-50 d-zuo d-wenzi-yanse-hui">
											<view class="d-wenzi-12 d-kuan-baifen-50 d-zuo d-neirong-zuo d-buhuanhang d-shang-4" @click="tiezi(item.cid,item.id)">
												<!--image src="/static/images/img/xiaoxi3.png" class="d-img-25"></image-->
												<u-icon :label="item.comments" size="28" name="/static/images/img/xiaoxi3.png"></u-icon>
												
											</view>
											<view class="d-wenzi-12 d-kuan-baifen-50 d-zuo d-neirong-you" :id="'zan'+item.id">
		
												<image v-if="item.zanzhi == 1" src="/static/images/img/dianzan2.png" class="d-img-35" @click="dianzan(index,item.id)"></image>
												<image v-else src="/static/images/img/zan3.png" class="d-img-35" @click="dianzan(index,item.id)"></image><!--{{item.zanzhi}}-->
												<!--u-icon size="35" name="/static/images/img/zan3.png"></u-icon-->
											</view>
										</view>
										<view class="d-clear"></view>
									</view>
									
								</view>
							</view>
							<!--评论-->
							<view class="">
								
							</view>
						</view>
					</view>
				</block>
			</block>
			<u-loading-icon text="加载中..." textSize="18" :show="xialajiazai" ></u-loading-icon>
			<view :style="'display:' + (isLoading?'block':'none')">
				<template is="tempLoading"></template>
			</view>
			<view class="loadingmore" :style="'display:' + floatDisplay">
				<view class="no-more" :hidden="!isLastPage">- 无更多文章 -</view>
			</view>
			<u-divider text="已经到底啦 !" v-if="daodi">{{daodi}}</u-divider>
			<!-- 版权信息template模板 -->
			<view class="copyright" :style="'display:' + floatDisplay">
				<block data-type="template" data-is="tempCopyright" data-attr="webSiteName:webSiteName,domain:domain">
					<view> {{webSiteName}} </view>
					<view> {{banbenhao}} </view>
				</block>
			</view>
		</view>
	</block>
	<!--导航-->
	<view v-if="jiaru == 1">
		<u-tabbar
			:value="value1"
			@change="daohangzhi"
			:fixed="true"
			:placeholder="true"
			:safeAreaInsetBottom="true"
			:activeColor="quan.beijingyanse"
			:customStyle="{'background-color': fenggeyanse =='light'? '#f5f9ff':'#0d0d0d'}"
		>
			<!--u-tabbar-item text="会员" icon="photo" @click="click1" ></u-tabbar-item-->
			<u-tabbar-item text="发帖" icon="plus-circle-fill"  @click="dfabu(quanid)" ></u-tabbar-item>
			<u-tabbar-item text="会员" icon="account" @click="huiyuan" ></u-tabbar-item>
		</u-tabbar>
	</view>
	<view v-else-if="jiaru == 2">
		<u-tabbar-xia
			:fixed="true"
			:placeholder="true"
			:safeAreaInsetBottom="true"
			:activeColor="quan.beijingyanse"
			:customStyle="{'background-color': fenggeyanse =='light'? '#f5f9ff':'#0d0d0d'}"
		>
			<uni-goods-nav 
				:fill="true"  
				:options="options" 
				:button-group="customButtonGroupfufei"
				 @click="onClick" 
				 @buttonClick="fufeijiaru"
				 :fenggeyanse="fenggeyanse"
			 />
		 </u-tabbar-xia>
	</view>
	<view v-else-if="jiaru == 3">
		<u-tabbar-xia
			:fixed="true"
			:placeholder="true"
			:safeAreaInsetBottom="true"
			:activeColor="quan.beijingyanse"
			:customStyle="{'background-color': fenggeyanse =='light'? '#f5f9ff':'#0d0d0d'}"
		>
			<uni-goods-nav 
				:fill="true"  
				:options="options" 
				:button-group="customButtonGroupyifufei"
				 @click="onClick" 
				 @buttonClick="fufeijiaru"
				 :fenggeyanse="fenggeyanse"
			 />
		 </u-tabbar-xia>
	</view>
	<view v-else-if="jiaru == 4">
		<u-tabbar-xia
			:fixed="true"
			:placeholder="true"
			:safeAreaInsetBottom="true"
			:activeColor="quan.beijingyanse"
			:customStyle="{'background-color': fenggeyanse =='light'? '#f5f9ff':'#0d0d0d'}"
		>
			<uni-goods-nav 
				:fill="true"  
				:options="options" 
				:button-group="customButtonGroupfufeidaoqi"
				 @click="onClick" 
				 @buttonClick="fufeijiaru"
				 :fenggeyanse="fenggeyanse"
			 />
		 </u-tabbar-xia>
	</view>
	<view v-else>
		<u-tabbar-xia
			:fixed="true"
			:placeholder="true"
			:safeAreaInsetBottom="true"
			:activeColor="quan.beijingyanse"
			:customStyle="{'background-color': fenggeyanse =='light'? '#f5f9ff':'#0d0d0d'}"
		>
			<uni-goods-nav 
				:fill="true"  
				:options="options" 
				:button-group="customButtonGroup"
				 @click="onClick" 
				 @buttonClick="buttonClick"
				 :fenggeyanse="fenggeyanse"
			 />
		 </u-tabbar-xia>
	</view>
	<!--弹出热门-->
	<u-popup :show="show" mode="bottom" round="10" :safeAreaInsetBottom="true">
		<view class="" style="height: 500px;">
			<vire class="d-kuan-100-100-100">
				<text></text>
				<u-tabbar
					:value="0"
					:fixed="true"
					:placeholder="true"
					:safeAreaInsetBottom="true"
				>
					<u-tabbar-item text="关闭热门" icon="close"  @click="show = false"></u-tabbar-item>
				</u-tabbar>
			</vire>
		</view>
	</u-popup>
</view>

</template>

<script>
import toubu from "@/components/toubu/toubu";  //引入头部组件
import Dwaterfall  from "@/components/d-waterfall/d-waterfall";  //引入组件
import config from "../../utils/config";
import Dxiazai from "@/components/d-xiazai/d-xiazai";  //引入组件
import Dzhaopin from "@/components/d-zhaopin/d-zhaopin";  //引入组件
import Dhuodong from "@/pages/components/d-huodong/d-huodong";  //引入组件

var Api = require("../../utils/api.js");
var util = require("../../utils/util.js");

var pageCount = config.getPageCount;
var wxApi = require("../../utils/wxApi.js");
var wxRequest = require("../../utils/wxRequest.js");
var webSiteName = config.getWebsiteName;
var domain = config.getDomain;
var banbenhao = config.getDuixinbanbenhao;
export default {
  data() {
    return {
		value1: 0,
		title: '',
		categoriesList: {},
		webSiteName: webSiteName,
		domain: domain,
		www: [],
		quan: [],
		daohang: {},
		daohangerji: {},
		postsList: [],
		isLastPage: false,
		showerror: "none",
		showallDisplay: "block",
		displaySwiper: "none",
		floatDisplay: "none",
		isLastPage: false,
		page: 1,
		// 是否第一次打开,
		isLoading: false,
		//下载加载提示
		xialajiazai: false,
		uid:'',
		zanzhi: false,
		userInfo:'',
		zhiding: [],
		jiazai:true,
		isFirst: false,
		quanid:'',
		qid: '',
		erji: '',
		banbenhao: banbenhao,
		quanzijiazai:false,
		daohangerjixs:false,
		yijiid: '',
		erjiid: '',
		daohangid: '0',

		show: false,
		fabushow: false,
		fabumodel:{},
		v:config.getDomain+'/static/default/web/img/V.png',
		mpsantu:config.getDomain+'/static/default/web/img/mpsan.png',
		daodi:false,
		fengge: '',
		columns:2,
		fenggeshow: false,
		fenggevalue: [
				  ['综合型', '瀑布图', '简约型','极简型']
			  ],
		fenggezhi:'',
		fenggemoren:'',
		fenggekaiguan: '',
		jiaru:'',
		keycode:'',
		options: [],
		customButtonGroup: [
		{
		  text: '加入圈子',
		  backgroundColor: 'linear-gradient(90deg, #63c8c0, #a184eb)',
		  color: '#fff'
		}],
		customButtonGroupfufei: [
		{
		  text: '',
		  backgroundColor: 'linear-gradient(90deg, #63c8c0, #eb8492)',
		  color: '#fff'
		}],
		customButtonGroupyifufei: [
		{
		  text: '您已付费加过圈子',
		  backgroundColor: 'linear-gradient(90deg, #63c8c0, #eb8492)',
		  color: '#fff'
		}],
		customButtonGroupfufeidaoqi: [
		{
		  text: '您加的圈子已经到期',
		  backgroundColor: 'linear-gradient(90deg, #63c8c0, #958a89)',
		  color: '#fff'
		}],
		fenggeyanse:'',
		quanzishuxing:[],
		bgColor: 'transparent',
		duankou:'',
		member:{},
		yonghuXinxi: [],
    };
  },

  components: {
	  toubu,
	  Dwaterfall,
	  Dxiazai,
	  Dzhaopin
  },
  props: {},
  onPageScroll: function (e) {
  	  var duixin = this;
  	  var yanse = e.scrollTop;
  	  if(yanse == 0) {
		  if(duixin.quan.beijingtu){
			  duixin.bgColor = 'transparent';
		  } else {
			  duixin.bgColor = duixin.quan.beijingyanse;
		  } 
  	  } else if(yanse > 150){
  		  if(this.fenggeyanse =='light'){
  			  duixin.bgColor = 'rgba(255 255 255)';
  		  } else {
  			  duixin.bgColor = 'rgba(0, 0, 0, 1)';
  		  }
  	  	
  	  }
  	  
  },
  onLoad: function (options) {
	  	var self = this;
		var duixin = this;
	  	self.quanid = options.id;
	    //console.log("title",quan.title);
		
		this.getQuan(options.id);
		duixin.duankoudata(); // 判断端口
		
		var userInfo = uni.getStorageSync('userInfo');
		self.userInfo = userInfo;
		var keycode = uni.getStorageSync('keycode');
		self.keycode = keycode;
		duixin.getQuanzishuxingData();
		//console.log("userInfo1",userInfo);
		if (userInfo) {
			self.showuid = true;
			var member = uni.getStorageSync('member');
			self.member = member;
			var uid = uni.getStorageSync('memberuid');
			self.uid = uid;
			duixin.getYonghuXinxi(uid);
			//console.log("member1",self.uid);
			//console.log("userInfo1",userInfo);
			self.fetchPostsData(self);
		} else {
			self.uid = '';
			self.fetchPostsData(self);
		}
		this.getWww();
		self.getZhiding();
		
		
		self.getINquanzi();
  },
  onShow: function () {
	  this.getDangqianurl();
	  var duixin = this;
	    // 暗黑模式
	  var initialThemes = uni.getStorageSync('theme');
	  if(!initialThemes){
	  	duixin.fenggeyanse = 'light';
	  	uni.setStorageSync('theme', 'light');
	  } else {
	  	duixin.fenggeyanse = initialThemes;
	  }
	  
	  
  },
  onPullDownRefresh: function () {
	var self = this;
	self.setData({
	  showerror: "none",
	  showallDisplay: "block",
	  displaySwiper: "none",
	  floatDisplay: "none",
	  isLastPage: false,
	  page: 1,
	  postsShowSwiperList: [],
	});
    this.fetchPostsData(self);
  },
  onReachBottom: function () {
    var self = this;
    if (!self.isLastPage) {
      self.setData({
        page: self.page + 1,
  		xialajiazai: true,
      });
  	  //console.log('当前页xialajiazai', self.xialajiazai);
      //console.log('当前页' + self.page);
      this.fetchPostsData(self);
    } else {
      //console.log('最后一页');
    }
	
	
  },
  //分享到个人朋友圈
  onShareAppMessage: function (res) {
  	  var duixin = this;
    return {
      title: duixin.quan.title,
      path: 'pages/quanzi/quanzi?id=' + duixin.quan.id,
      //imageUrl: duixin.www['logo'],
      success: function (res) {
        // 转发成功
        //console.log(res);
      },
      fail: function (res) {
        //console.log(res); // 转发失败
      }
    };
  },
  //分享到朋友圈
  onShareTimeline: function (res) {
  	  var duixin = this;
  	  return {
  	    title: duixin.quan.title,
  	    path: 'pages/quanzi/quanzi?id=' + duixin.quan.id,
  		//imageUrl: duixin.www['logo'],
  	    success: function (res) {// 转发成功
  	    },
  	    fail: function (res) {// 转发失败
  	    }
  	  };
  },
  onUnload: function () {
  	this.audioDestroy();
  	console.log('销毁');
  },
  onHide: function ()  {
  	this.audioDestroy()
  },
  methods: {
	audioDestroy(){
		const refNames = Object.keys(this.$refs);
		// 过滤出引用名为"bbb"和"ccc"的组件  refName !== 'ccc125' !/`event`|privacy|hbComment/.test(refName)
		const filteredRefs = refNames.filter(refName => refName !== 'privacy' && refName !== 'hbComment' && refName !== 'audio');  
		//console.log('refNames',filteredRefs);
		// 循环遍历引用名称  
		filteredRefs.forEach((refName) => {  
		  // 获取对应的引用对象（即子组件实例）
		  this.$refs[refName][0].zanting(0);
		  
		  // 在这里可以对refObject进行操作，例如调用方法或访问数据属性等  
		  //console.log(refName, refObject);  
		});
		console.log('销毁');
		
	},
	//获取站点
	getWww() {
	  	var duixin = this;
	  	duixin.setData({
	  	  www: []
	  	});
	  	var getTubiaoRequest = wxRequest.getRequest(Api.getWwwUrl()+'&api_auth_uid='+duixin.uid+'&api_auth_code='+duixin.keycode);
	  	getTubiaoRequest.then(response => {
	  		if (response.data.code == 1) {
	  		  //console.log(response.data.data); 
	  		  duixin.www = response.data.data
	  		} else {
	  		  duixin.setData({
	  			displaySwiper: "none"
	  		  });
	  		}
	  	});
	},
	//内容帖子
	tiezi(quanid,tieid) {
		var duixin = this;
		// console.log('查看帖子');
		var url = '../tiezi/tiezi?qid='+quanid+'&id='+tieid;
		uni.navigateTo({
			url: url
		});
	},
	quanidurl() {
		var duixin = this;
		
		var url = '../quanzi/quanid?id='+duixin.quanid+'&qid='+duixin.qid+'&erji='+ duixin.erji;
		uni.navigateTo({
			url: url
		});
		
		//console.log('查看帖子',duixin.quanid+'/'+duixin.qid+'/'+duixin.erji);
	},

	// 获取圈子信息
	getQuan(quanid) {
		var self = this;
		var duixin = this;
		self.setData({
		  quan: [],
		  daohang: {}
		});
		var getQuanRequest = wxRequest.getRequest(Api.getQuan(quanid,self.qid,self.erji));
		getQuanRequest.then(response => {
			if (response.data.code == 1) {
				self.jiazai = false;
				self.quanzijiazai = true;
			  //console.log('quan',response.data.data); 
			  self.quan = response.data.data;
			  duixin.customButtonGroupfufei[0].text = '付费加入 '+self.quan.price+' 元 '+self.quan.tianshu+' 天';
			  duixin.getWeixinFenxiangMiyueData(response.data.data);
			  if(duixin.quan && duixin.quan.beijingtu){
			  	duixin.bgColor = 'transparent';
			  } else {
				  if(duixin.quan && duixin.quan.beijingyanse){
				  	  duixin.bgColor = duixin.quan && duixin.quan.beijingyanse;
				  } else {
					  duixin.bgColor = '#39ada7';
				  }
			  } 
			  //console.log("yanse",duixin.quan);
			  
			  self.title = response.data.data.title; //beijingyanse
			  self.getDaohangerj(quanid);
			  /*let shouye = {
				  2:{
					"name": "首页",
					"id":0
				  }
			  };*/
			  //let combinedJson = JSON.concat(json1, json2);
			  //self.daohang = shouye.concat(response.data.data.daohang); 
			  self.daohang = response.data.data.daohang; 
			  for (let key in self.daohang) {
			          //self.daohang = self.daohang[key];
					  //console.log(self.daohang[key].name);
			        }
				//console.log("daohang",self.daohang); 
			  var beijingyanse = response.data.data.beijingyanse;
			  uni.setNavigationBarTitle({
			    title: self.title
			  });
			  //uni.setNavigationBarColor("#ffffff", beijingyanse);

			  uni.setNavigationBarColor({
			  	backgroundColor: this.fenggeyanse =='light'? beijingyanse:'#151515',
			  	frontColor: this.fenggeyanse =='light'? '#ffffff':'#ffffff',
				animation: {
				    duration: 400,
				    timingFunc: 'easeIn'
				}
			  })
			  

			} else {
			  self.setData({
				displaySwiper: "none"
			  });
			}
		});
	},
	//二级导航
	getDaohangerj(quanid) {
		var self = this;
		
		var getQuanRequest = wxRequest.getRequest(Api.getQuan(quanid,self.qid,self.erji));
		getQuanRequest.then(response => {
			if (response.data.code == 1) {
				
			  if (response.data.data.daohangerji) {
			  		self.daohangerjixs = true;
			  		self.daohangerji = response.data.data.daohangerji;
			  } else {
			  		self.daohangerjixs = false;
			  }
			  //console.log('二级',self.daohangerji);
			} else {
			  self.setData({
				displaySwiper: "none"
			  });
			}
		});
	},

    reloadData: function (id) {
      var self = this;
      var newCategoriesList = [];
      var categoriesList = self.categoriesList;

      for (var i = 0; i < categoriesList.length; i++) {
        if (categoriesList[i].id == id) {}

        newCategoriesList.push(categoriesList[i]);
      }

      if (newCategoriesList.length > 0) {
        self.setData({
          categoriesList: newCategoriesList
        });
      }
    },
    //跳转至某分类下的文章列表
    redictIndex: function (e) {
      //console.log('查看某类别下的文章');  
      var id = e.currentTarget.dataset.id;
      var name = e.currentTarget.dataset.item;
      var url = '../list/list?categoryID=' + id;
      uni.navigateTo({
        url: url
      });
    },
	//一级栏目
	click(payload){
		var duixin = this;
		duixin.qid = payload.id
		duixin.erji = '';
		duixin.getDaohangerj(duixin.quanid);
		duixin.fetchPostsData(duixin);
		duixin.quanidurl();
		//缓存一级id
		uni.setStorageSync('yijiid', payload.id);
		var yijiid = uni.getStorageSync('yijiid');
		duixin.yijiid = yijiid;
		duixin.daohangid = yijiid;
		
		//清理二级id
		uni.removeStorageSync('erjiid');
		//console.log('yijiid',yijiid); 
	},
	//二级栏目
	clickErji(payload) {
		var duixin = this;
		//console.log('二级导航',payload.eid);
		//一级id
		 duixin.qid = duixin.yijiid;
		 //console.log('一级导航',duixin.qid);
		 duixin.erji = payload.eid;
		duixin.fetchPostsData(duixin);
		duixin.daohangid = payload.eid;
	},
	//获取列表数据
	fetchPostsData: function (data) {
	  var self = this;
	  var duixin =this;
	  if (!data) data = {};
	  if (!data.page) data.page = 1;
	  if (!data.categories) data.categories = 0;
	  if (!data.search) data.search = '';
	  if (!data.unuid) data.unuid = duixin.uid;
	  if (data.page === 1) {
		self.setData({
		  postsList: []
		});
	  };
	  self.setData({
		isLoading: true
	  });
		  
		var getPostsRequest = wxRequest.getRequest(Api.getQuanlist(data,self.uid,self.quanid,self.qid,self.erji));
		getPostsRequest.then(response => {
			
		if (response.data.code == 1) {
			self.jiazai = false;
			self.xialajiazai = false;
			//self.fenggemoren = response.data.data[0].fengge;
			var fenggezhi = uni.getStorageSync('fenggezhi');
			if(fenggezhi) {
				self.fengge = fenggezhi;
			} else {
				self.fengge = response.data.data[0].fengge;
			}
			self.fenggekaiguan = response.data.data[0].fenggekaiguan;
			if (response.data.data.length) {
				
			  if (response.data.data.length < pageCount) {
					self.setData({
					  isLastPage: true,
					  isLoading: false,
					  
					});
			  }
			 
			 				
			  self.setData({
				floatDisplay: "block",
				postsList: self.postsList.concat(response.data.data.map(function (item) {
			
				  /*if (item.thumb == null || item.thumb == '') {
					item.thumb = "/static/images/logo700.png";
				  }*/
	
				  return item;
				}))
			  });
			  
			} else {
			  if (response.data.code == "rest_post_invalid_page_number") {
				self.setData({
				  isLastPage: true,
				  isLoading: false
				});
	
				/*uni.showToast({
				  title: '没有更多内容',
				  mask: false,
				  duration: 1500
				});*/
				
			  } else {
				  // 隐藏提示
				uni.showToast({
				  title: response.data.message,
				  duration: 1500
				});
				/*uni.showToast({
				  title: '没有更多内容',
				  duration: 500
				});*/
				self.daodi = true;
				//console.log('没有了',self.daodi);
			  }
			}
		  }
		}).catch(function (response) {
		  if (data.page == 1) {
			self.setData({
			  showerror: "block",
			  floatDisplay: "none"
			});
		  } else {
			/*uni.showModal({
			  title: '加载失败',
			  content: '加载数据失败,请重试.',
			  showCancel: false
			});*/
			self.setData({
			  page: data.page - 1
			});
		  }
		}).finally(function (response) {
		  uni.hideLoading();
		  self.setData({
			isLoading: false
		  });
		  uni.stopPullDownRefresh();
		});
	},
	
	//加载分页
	loadMore: function (e) {
	  var self = this;
	
	  if (!self.isLastPage) {
		self.setData({
		  page: self.page + 1
		}); 
		//console.log('当前页' + self.data.page);
	
		this.fetchPostsData(self);
	  } else {
		uni.showToast({
		  title: '没有更多内容',
		  mask: false,
		  duration: 1000
		});
	  }
	},
	//关注
	getGuanzhus(index,uid) {
		var duixin = this;
		var getGuanzhuRequest = wxRequest.getRequest(Api.getGuanzhu(duixin.uid,duixin.userInfo)+'&uid='+uid);
		var res;
		getGuanzhuRequest.then(response => {
			res = response;
			if(res.data.code) {
				if(res.data.data.status == 1) {
					this.postsList[index].guanzhuuid = 1;
					
					uni.showToast({
						title: res.data.msg,
						icon: 'success',
						duration: 2000
					});
					
				} else {
					this.postsList[index].guanzhuuid = 0;
					
					uni.showToast({
					  title: res.data.msg,
					  mask: false,
					  duration: 1000
					});
				}
				
			} else {
				uni.showToast({
					icon: 'none',
					title: res.data.msg+'关注提示'
				});
			}
		})
	},
	// 跳转至查看文章详情
	redictDetail: function (e) {
	  // console.log('查看文章');
	  var id = e.currentTarget.id,
	  url = '../detail/detail?id=' + id;
	  uni.navigateTo({
		url: url
	  });
	},
	//点赞值
	dianzan(index,tieid) {
		var duixin = this;
		var getZanRequest = wxRequest.getRequest(Api.getZan(tieid,duixin.uid,duixin.userInfo));
		var res;
		getZanRequest.then(response => {
			res = response;
			if(res.data.code) {
				if(res.data.msg.status == 1) {
					if (this.postsList[index].zanzhi == 0) {
						this.postsList[index].zanzhi = 1;
						uni.showToast({
							title: res.data.msg.value+' '+res.data.msg.jifen,
							icon: 'success',
							duration: 2000
						});
					} else {
						this.postsList[index].zanzhi = 0;
						uni.showToast({
							title: res.data.msg.value+' '+res.data.msg.jifen,
							icon: 'success',
							duration: 2000
						});
					}
				} else {
					this.postsList[index].zanzhi = 0;
					uni.showToast({
						title: res.data.msg.value+' '+res.data.msg.jifen,
						icon: 'success',
						duration: 2000
					});
				}
			} else {
			    if(res.data.msg=="账号必须实名认证"){
			    	uni.showModal({
			    		title: res.data.msg,
			    		//content: '请先登录',
			    		confirmText: '前往认证',
			    		success: function(res) {
			    			if (res.confirm) {
			    				uni.navigateTo({
			    					url: '/pages/shezhi/renzheng'
			    				});
			    			}
			    		}
			    	});
			    } else {
					uni.showModal({
					title: '请先登录',
					//content: '请先登录',
					confirmText: '前往登录',
					success: function(res) {
						if (res.confirm) {
							uni.redirectTo({
								url: '/pages/login/login'
							});
						}
					}
					});
			    }
			}
		})
		//console.log("帖子index",index);
		//console.log("帖子tieid",tieid);
	},
	daohangzhi(name) {
		//if (name === 1) return uni.$u.toast('请您先登录')
		//else this.value1 = name
		this.value1 = name

	},
	//热门
	dremenclose(e) {
	    this.show = true
	},
	//发布
	dfabuclose(e) {
		this.fabushow = true
	},
	
	//置顶列表
	getZhiding() {
		var duixin = this;
		var getZhidingRequest = wxRequest.getRequest(Api.getQuanZhiding(duixin.quanid));
		var res;
		getZhidingRequest.then(response => {
			res = response;
			if(res.data.code) {
				duixin.zhiding = res.data.data;
			} else {
				uni.showToast({
					icon: 'none',
					title: '获取失败，请稍后重试'
				});
			}
		})
	},
	//发布
	dfabu(quanid) {
		var duixin = this;
		if(duixin.userInfo) {
			
			var url = '../quanzi/fabu?id=' + quanid;
			uni.navigateTo({
				url: url
			});
			
		} else {
			//否则跳转到登录页面
			uni.navigateTo({
				url: '/pages/login/login'
			});
		}
		
	},
	//消息
	dxiaoxi(quanid) {
		var duixin = this;
		if(duixin.userInfo) {
			
			var url = '../quanzi/xiaoxi?id=' + quanid;
			uni.navigateTo({
				url: url
			});
			
		} else {
			//否则跳转到登录页面
			uni.navigateTo({
				url: '/pages/login/login'
			});
		}
	},
	//我的
	dwode(quanid) {
		var duixin = this;
		if(duixin.userInfo) {
			
			var url = '../quanzi/wode?id=' + quanid;
			uni.navigateTo({
				url: url
			});
			
		} else {
			//否则跳转到登录页面
			uni.navigateTo({
				url: '/pages/login/login'
			});
		}
		
	},
	// 个人页面
	getgeren(uid) {
		//console.log('uid点击',uid);
		var url = '../u/index?&uid='+uid;
		uni.navigateTo({
			url: url
		});
	},
	fenggeclose(){
		this.fenggeshow = false
	},
	fenggeopen(){
		this.fenggeshow = true
	},
	fenggevalues(e){
		var duixin = this;
		duixin.fenggezhi = e.index+1;
		duixin.fengge = e.index+1;
		console.log('duixin.fenggevalue', duixin.fenggezhi);
		uni.setStorageSync('fenggezhi', e.index+1);
		var StorageSync = uni.getStorageSync('fenggezhi', e.index+1);
		//console.log('StorageSync缓存值：', StorageSync);
		
	},
	//加入圈子
	postJiaruquanzidata() {
		var duixin = this;
		if(duixin.keycode){
			var postJiaruquanziRequest = wxRequest.getRequest(Api.postJiaruquanzi(duixin.uid,duixin.userInfo,duixin.quanid));
			var res;
			postJiaruquanziRequest.then(response => {
				res = response;
				if(res.data.msg == "加入圈子") {
					duixin.jiaru = 1;
					uni.showToast({
						title: res.data.msg,
						icon: 'success',
						duration: 2000
					});
				}
				if(res.data.msg == "退出圈子") {
					duixin.jiaru = 0;
					uni.showToast({
						title: res.data.msg,
						icon: 'success',
						duration: 2000
					});
				}
				if(res.data.msg=="账号必须实名认证"){
					uni.showModal({
						title: res.data.msg,
						//content: '请先登录',
						confirmText: '前往认证',
						success: function(res) {
							if (res.confirm) {
								uni.navigateTo({
									url: '/pages/shezhi/renzheng'
								});
							}
						}
					});
				} 
				if(!duixin.keycode){
					uni.showModal({
					title: '请先登录',
					//content: '请先登录',
					confirmText: '前往登录',
					success: function(res) {
						if (res.confirm) {
							uni.redirectTo({
								url: '/pages/login/login'
							});
						}
					}
					});
				}
				if(res.data.code == 2) {
					uni.showToast({
						title: res.data.msg,
						icon: 'none',
						duration: 2000
					});
				}
			})
		} else {
			//否则跳转到登录页面
			uni.navigateTo({
				url: '/pages/login/login'
			});
		}
		
	},
	//判断是否加入圈子
	getINquanzi() {
		var duixin = this;
		var getJiaruQuanziRequest = wxRequest.getRequest(Api.getJiaruQuanzi(duixin.uid,duixin.userInfo,duixin.quanid));
	    var res;
		getJiaruQuanziRequest.then(response => {
	    	res = response;
			if(res.data.code){
				if(res.data.data.jiaru == "1") {
					duixin.jiaru = 1;
					
				} else if (res.data.data.jiaru == "2") {
					duixin.jiaru = 2;
				}else if (res.data.data.jiaru == "3") {
					duixin.jiaru = 3; // 待加入，已经付费
				}else if (res.data.data.jiaru == "4") {
					duixin.jiaru = 4; //到期
				} else {
					duixin.jiaru = 0;
				}
			} else {
				uni.showModal({
				  title: '提示',
				  content: res.data.msg,
				  success: function(res) {
				  	if (res.confirm) {
				  		
				  		uni.redirectTo({
				  			url: '/pages/shezhi/renzheng'
				  		});
				  	}
				  }
				});
			}
	    })
	},
	//获取当前页面
	getDangqianurl() {
		//获取当前页面栈的实例
		let pages = getCurrentPages();
		//获取当前页面
		let currentPage = pages[pages.length-1].$page.fullPath;
		let url = currentPage;
		uni.setStorageSync('dangqianUrl', url);
	},
	//支付后返回当前页面
	getFanhuiurl() {
		//获取当前页面栈的实例
		let pages = getCurrentPages();
		//获取当前页面
		let currentPage = pages[pages.length-1].$page.fullPath;
		let url = currentPage;
		uni.setStorageSync('fanhuiurl', url);
	},
	//加入
	buttonClick(e){
		this.postJiaruquanzidata();
	},
	onClick(){
		
	},
	//视频播放错误时触发
	videoErrorCallback: function(e) {
		uni.showModal({
			content: e.target.errMsg,
			showCancel: false
		})
	},
	audioPlay(event){
		let _this = this;
		//console.log('refs',event);
		// 获取$refs对象的所有属性（即引用名称）  
		const refNames = Object.keys(this.$refs);
		// 过滤出引用名为"bbb"和"ccc"的组件  refName !== 'ccc125' !/`event`|privacy|hbComment/.test(refName)
		const filteredRefs = refNames.filter(refName => refName !== 'privacy' && refName !== 'hbComment' && refName !== 'audio' && refName !== event);  
		//console.log('refNames',filteredRefs);
		// 循环遍历引用名称  
		filteredRefs.forEach((refName) => {  
		  // 获取对应的引用对象（即子组件实例）
		  this.$refs[refName][0].zanting(0);
		  //const refObject = this.$refs[refName][0]; 
		  // 在这里可以对refObject进行操作，例如调用方法或访问数据属性等  
		  //console.log(refName, refObject);  
		}); 
	
	},
	audioPause(e){
		console.log('audioPause',e);
	},
	// 圈子属性
	getQuanzishuxingData(){
		var duixin = this;
		//console.log('xx'); 
		var getQuanzishuxingRequest = wxRequest.getRequest(Api.getQuanzishuxing());
		getQuanzishuxingRequest.then(response => {
			if (response.data.code == 1) {
			  //console.log(response.data.data); 
			  duixin.quanzishuxing = response.data.data
			} else {
			  duixin.setData({
				displaySwiper: "none"
			  });
			}
		});
	},
	fanhui() {
		const pages = getCurrentPages();  //判断跳转了多少页
		if (pages.length === 2) {  
			uni.navigateBack({
				delta: 1
			});
		} else if (pages.length === 1) { //如果没有上一页返回首页
			uni.switchTab({
				url: '/pages/index/index',
			})
		} else {
			uni.navigateBack({
				delta: 1
			});
		}
		
	},

	// 微信分享密钥
	getWeixinFenxiangMiyueData(data){
		var duixin = this;
		const url = decodeURIComponent(window.location.href);
		if(data.thumb){
			var tupian = data.thumb;
		} else {
			var tupian = data.thumb;
		}
		
		//console.log('data',duixin.www.meta_title); 
		var getWeixinfengxiangmiyueRequest = wxRequest.getRequest(Api.getWeixinfengxiangmiyue(url));
		getWeixinfengxiangmiyueRequest.then(response => {
			if (response.data.code == 1) {
				
			  var weixin = response.data.data;
			  //console.log('data',data); 
			  //duixin.weixinfenxiangmiyue = response.data.data
				duixin.$wx.config({
				  debug: false,//true
				  appId: weixin.appId,
				  timestamp: weixin.timestamp,
				  nonceStr: weixin.nonceStr,
				  signature: weixin.signature,
				  jsApiList: [

				    // 这里需要自己按微信文档来写参数
				    "updateAppMessageShareData", 
					"updateTimelineShareData",
					'checkJsApi', //判断当前客户端版本是否支持指定JS接口  
					'onMenuShareAppMessage', //分享接口  
					'getLocation', //获取位置  
					'openLocation', //打开位置  
					'scanQRCode', //扫一扫接口  
					'chooseWXPay', //微信支付  
					'chooseImage', //拍照或从手机相册中选图接口  
					'previewImage', //预览图片接口  
					'uploadImage' //上传图片  
				  ]
				});
				duixin.$wx.ready(function () {
				     // 自定义“分享给朋友”及“分享到QQ”按钮的分享内容
				     duixin.$wx.updateAppMessageShareData({ 
				      title: data.title+' - '+duixin.www.meta_title, // 分享标题
				      desc: data.description, // 分享描述
				      link: url, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
						imgUrl: tupian, // 分享图标
				      success: function () {
				        // 设置成功
				      },
					    complete:function(argv){
					        
					    }
				    });
				    //自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容
				    duixin.$wx.updateTimelineShareData({
				      title: data.title+' - '+duixin.www.meta_title, // 分享标题
					  desc: data.description, // 分享描述
				      link: url, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
				      imgUrl: tupian, // 分享图标
				      success: function () {
				        // 设置成功
						//console.log('weixinmiyue2222',duixin.www.meta_title); 
				      }
				    });
				});
				duixin.$wx.error(function(res){
				  //console.log('weixinres',res); 
				});
				
			} else {
			  duixin.setData({
				displaySwiper: "none"
			  });
			}
		});
	},
	huiyuan(){
		var duixin = this;
		var url = '../huiyuan/huiyuan?hid='+duixin.quanid;
		uni.navigateTo({
		    url: url
		});
	},
	// 判断端口
	duankoudata(){
		var duixin = this;
		let ua = uni.getSystemInfoSync().platform;
		console.log('duankou',ua);
		if(/(iPhone|iPad|iPod|ios)/i.test(ua)){
		  // 苹果
			duixin.duankou = false;
		} else if(/android/i.test(ua)){
		  // 安卓
			duixin.duankou = true;
		} else {
		  // 其他
			duixin.duankou = true;
		}
	},
	
	//付费加入
	fufeijiaru(){
		var duixin = this;
		if(!duixin.keycode){
			uni.showModal({
			title: '请先登陆',
			//content: '您的余额：',
			confirmText: '登陆',
			
			success: function(res) {
				if (res.confirm) {
					uni.redirectTo({
						url: '/pages/login/login'
					});
				}
			}
			});
		} else if (duixin.duankou){
			
			 if (duixin.jiaru==3){
				uni.showModal({
				title: '您付费加入过圈子',
				content: '本次不扣取费用',
				cancelText: '取消',//取消按钮的文字
				confirmText: '确认',
					success: function(res) {
						if(res.confirm){
							
							duixin.getfufeijiaruqian();
							duixin.jiaru = 1;
						} else if (res.cancel) { //点击取消之后执行的代码
						    
						}
						
					}
				});
			} else if (duixin.jiaru==4){
				uni.showModal({
				title: '您加入的圈子已经到期',
				content: '请续费,'+duixin.quan.price+ ' 元' + duixin.quan.tianshu+' 天',
				cancelText: '取消',//取消按钮的文字
				confirmText: '确认',
					success: function(res) {
						if(res.confirm){
							duixin.getfufeijiaruqian();
							
						} else if (res.cancel) { //点击取消之后执行的代码
						    
						}
						
					}
				});
			} else if (duixin.yonghuXinxi.money >= duixin.quan.price){
				uni.showModal({
				title: '付费加入'+duixin.quan.price+ ' 元',
				content: '您的余额：'+duixin.yonghuXinxi.money+' 元',
				cancelText: '取消',//取消按钮的文字
				confirmText: '确定加入',
					success: function(res) {
						if(res.confirm){
							duixin.jiaru = 1;
							duixin.getfufeijiaruqian();
						} else if (res.cancel) { //点击取消之后执行的代码
						    
						}
					}
				});
			
			} else {
				uni.showModal({
				title: '付费加入'+duixin.quan.price+ ' 元',
				content: '您的余额：'+duixin.yonghuXinxi.money+' 元',
				cancelText: '取消',//取消按钮的文字
				confirmText: '去充值',
					success: function(res) {
						if(res.confirm){
							duixin.getFanhuiurl();
							if (res.confirm) {
								uni.redirectTo({
									url: '/pages/chongzhi/chongzhi'
								});
							}
						}else if (res.cancel) { //点击取消之后执行的代码
						    
						}
						
					}
				});
			}
			
		} else {
			uni.showToast({
				icon: 'none',
				title: 'IOS暂时不支持充值',
				duration: 1000
			});
		}
		
	},
	// 使用余额付费加入
	getfufeijiaruqian(){
		var duixin = this;
		console.log('xx'); 
		var getFufeijiaquanRequest = wxRequest.getRequest(Api.getFufeijiaquan(duixin.uid,duixin.keycode,duixin.quanid));
		getFufeijiaquanRequest.then(response => {
			if (response.data.code == 1) {
				  if(response.data && response.data.data && response.data.data.code==1){
					  duixin.jiaru = 1;
				  }
				  uni.showToast({
					icon: 'none',
					title: response.data && response.data.data && response.data.data.msg,
					duration: 2000
				  });
			  
			} else {
			  uni.showToast({
				icon: 'none',
				title: response.data && response.data.data && response.data.data.msg,
				duration: 2000
			  });
			}
		});
	},
	//会员信息
	getYonghuXinxi(uid) {
		var duixin = this; 
		var getYonghuXinxiRequest = wxRequest.getRequest(Api.getYonghuXinxi(uid));
		getYonghuXinxiRequest.then(response => {
			if (response.data.code == 1) {
			  duixin.yonghuXinxi = response.data.data
			} else {
			  duixin.setData({
				displaySwiper: "none"
			  });
			}
		});
	},
	//复制采集url
	caijiurl(data){
		// #ifdef MP
		    uni.setClipboardData({
		    	data: data,
		    	success: () =>
		    		uni.showToast({
		    			title: '链接已复制'
		    		})
		    })
		// #endif
		// #ifdef APP-PLUS || H5
		uni.navigateTo({
			url: data
		})
		// #endif
		
	}
  },
  computed: {  
      beijingtuImage() {  
        return `background: url("${this.quan.beijingtu}") center center / cover no-repeat rgb(255, 255, 255);margin-top: -88px;`;  
      },  
      beijingtuColor() {  
        //return `background-color: ${this.fenggeyanse === 'light' ? this.quan.beijingyanse : '#000000'};margin-top: -88px;`; 
		 let backgroundColor;  
		     if (this.fenggeyanse === 'light') {  
		         if (this.quan && this.quan.beijingyanse) {  
		             backgroundColor = this.quan && this.quan.beijingyanse;  
		         } else {  
		             backgroundColor = '#39ada7'; // 当this.quan.beijingyanse为空时，使用此颜色  
		         }  
		     } else {  
		         backgroundColor = '#000000';  
		     }  
		     return `background-color: ${backgroundColor};margin-top: -88px;`; 
      }  
    }
};
</script>
<style lang="scss">
@import "./quan.css";
page {
	background-color: #ffffff;
}
.album {
	@include flex;
	align-items: flex-start;

	&__avatar {
		 background-color: $u-bg-color;
		 padding: 1px;
		 border-radius: 50rpx;
	 }

	&__content {
		 margin-left: 10px;
		 flex: 1;
	 }
}
.d-fenggegao {
	height: 550rpx;
}

</style>